<template>
  <!-- 递归入口 -->
  <!-- 文件夹为SubMenu，文件为MenuItem -->
  <el-menu :default-active="activeMenuId" :collapse="false" @select="handleSelect">
    <template v-for="(menu, index) in menuList">
      <SubMenu v-if="menu.isFolder" :key="menu.id + index" :menu="menu"></SubMenu>
      <MenuItem v-else :key="menu.id + index" :menuItem="menu">
      </MenuItem>
    </template>
  </el-menu>
</template>

<script>
import SubMenu from './SubMenu' // 子菜单
import MenuItem from './MenuItem' // 叶子节点
export default {
  props: [
    'menuList', //菜单数据
    'activeMenuId' //当前激活菜单的 index	
  ],
  components: {
    SubMenu,
    MenuItem
  },
  data () {
    return {
      openList: ['1']
    }
  },
  computed: {
  },
  methods: {
    handleSelect (key, keyPath) {
      //   console.log('handleSelect', key, keyPath)
      this.$emit('select', key, keyPath)
    }
  }
}
</script>